import React from "react"
import queryString from 'query-string'
import { BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch, withRouter } from 'react-router-dom'
import Dfenleicss from "./style/index.module.css"
import img1 from "./img/返回1.png"
class Diantaifenlei extends React.Component {
    state = {
        imgHeight: 176,
        zhoumozuanyong: [],
        zhoumozuanyong1: [],

    }
    componentWillMount() {
        fetch('http://106.13.33.47:4000/dj/catelist')
            .then(body => body.json())
            .then(res => {
                console.log(res.categories)
                console.log(res.categories[1])
                console.log(res.categories[2])
                console.log(res.categories[2].pic56x56Url)
                console.log(res.categories[2].name)
                console.log(res.categories[2].id)
                for (var i = 0; i < 6; i++) {
                    (this.state.zhoumozuanyong).push(res.categories[i])
                    this.setState({
                    })
                }
            })
        fetch('http://106.13.33.47:4000/dj/catelist')
            .then(body => body.json())
            .then(res => {
                for (var i = 6; i < 20; i++) {
                    (this.state.zhoumozuanyong1).push(res.categories[i])
                    this.setState({
                    })
                }
            })
    }
    img1fanhui() {
        // this.props.history.goBack()
        this.props.history.push("/Diantai")
    }

    render() {
        let { zhoumozuanyong, zhoumozuanyong1 } = this.state
        return (
            <div>
                <div>
                    <img onClick={this.img1fanhui.bind(this)} className={Dfenleicss.img1} src={img1} alt="" />
                    <span className={Dfenleicss.divspan1}>电台分类</span>
                </div>
                <div>
                    <div className={Dfenleicss.div2div2div1}>热门分类</div>
                    {
                        <ul>
                            {
                                zhoumozuanyong.map(item =>
                                    <li className={Dfenleicss.div2div2} key={item.id}>
                                        <Link to="/Chuangzuofanchang">
                                            <img className={Dfenleicss.div2div2img1} src={item.pic56x56Url} alt="" />
                                            <span>{item.name}</span>
                                        </Link>
                                    </li>
                                )
                            }
                        </ul>
                    }
                </div>
                <div>
                    <div className={Dfenleicss.div2div2div1}>更多分类</div>
                    {
                        <ul>
                            {
                                zhoumozuanyong1.map(item =>
                                    <li className={Dfenleicss.div2div2} key={item.id}>
                                        <img className={Dfenleicss.div2div2img1} src={item.pic56x56Url} alt="" />
                                        <span>{item.name}</span>
                                    </li>
                                )
                            }
                        </ul>
                    }

                </div>
            </div>
        )
    }
}
export default Diantaifenlei